<template>
	<view class="content">
		
		<view class="dataBox bgIsWhite">
			<view class="rowList">
				<image class="goodsImage" :src="goodsList.thumb_url" mode=""></image>
				<view class="goodsRight">
					<view class="goodsName overflow_one fontSize15">{{goodsList.goods_name}}</view>
					<view class="ruleBox fontSize12">{{goodsList.goods_attr_str}}</view>
					<view class="clearBoth"></view>
					<view class="priceBox">
						<view class="price fontSemiBold">¥{{goodsList.price}}</view>
						<view class="buyNumber">x{{goodsList.goods_num}}</view>
						<view class="clearBoth"></view>
					</view>
					<view class="clearBoth"></view>
				</view>
			</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="chooseBox bgIsWhite">
			<view class="title">退货方式</view>
			
			<view class="radioBox" @tap="btnChoseeWay(index)" v-for="(item,index) in thcateres" :key="index">
				<image class="thisOne" src="/pages_mine/pages/static/order/icon_bingo.png" mode="" v-if="data.choseeWay == index"></image>
				<view class="thisNone" v-if="data.choseeWay !== index"></view>
				<view class="name">{{item.cate_name}}</view>
				<view class="clearBoth"></view>
			</view>
			<!-- <view class="rowList" @tap="goodsStatusBoolean = true">
				<view class="LeftName fontSize13">货物状态</view>
				<view class="hideName" v-show="showStatus">{{statusName}}</view>
				<uni-icons class="icons" type="arrowright" color="#010101" size="16"/>
			</view> -->
			<view class="rowList"  @tap="backWayBoolean = true">
				<view class="LeftName fontSize13">退款原因</view>
				<view class="hideName" v-show="showBackWhy">{{BackWhyName}}</view>
				<uni-icons class="icons" type="arrowright" color="#010101" size="16"/>
			</view>
			<view class="rowList">
				<view class="LeftName">实付金额</view>
				<view class="usePrice fontSize15 fontSemiBold">¥{{data.tui_price}}</view>
			</view>
			<view class="rowList">
				<view class="LeftName">退款金额</view>
				<!-- <view class="usePrice fontSize15 fontSemiBold">¥{{data.tui_price}}</view> -->
				<input class="backInput" type="number" v-model="data.backMoney" placeholder="输入退款金额" maxlength="7">
			</view>
			<view class="rowList">
				<view class="LeftName">退款说明</view>
				<textarea class="backTextarea" v-model="data.backWhy" placeholder="请简单的阐述一下你的退款说明？提交后会有客服为你 处理~" />
			</view>
			
			<view class="imageBoxes" @tap="addBtn">
				<view class="boxImage">
					<image class="icon" src="/pages_mine/pages/static/order/icon_1.png" mode=""></image>
					<view class="iconName">上传凭证</view>
				</view>
				<view class="imageName fontSize12">*最多上传3张</view>
			</view>
			
			<view class="showImageBox">
				<image class="moreImage" :src="item.src" v-for="(item,index) in imageList" :key="index" mode=""></image>
			</view>
			
			
			<view class="clearBoth"></view>
		</view>
		
		<view class="btnTips" @tap="btnTips">提交</view>
		
		<view class="payBox" v-show="backWayBoolean">
			<view class="bg_grey"></view>
			<view class="bg_white">
				<view class="title fontSize15">退款原因</view>
				<image class="icon" src="/static/index/details/icon_close2.png" mode="" @tap="backWayBoolean = false"></image>
				<view class="scrollBox">
					<view class="rows" @tap="backWay(index,item.id)" v-for="(item,index) in backWaysList" :key="index">
						<view class="name fontSize15">{{item.name}}</view>
						<view  class="noneIcon" v-show="item.beThis == false"></view>
						<image class="thisOne" src="/pages_mine/pages/static/order/icon_bingo.png" mode="" v-show="item.beThis"></image>
						<view class="clearBoth"></view>
					</view>
					<view class="clearBoth"></view>
				</view>
				<view class="btnSure" @tap="btnBackSure">确认</view>
			</view>
		</view>
		
		<view class="payBox" v-show="goodsStatusBoolean">
			<view class="bg_grey"></view>
			<view class="bg_white">
				<view class="title fontSize15">货物状态</view>
				<image class="icon" src="/static/index/details/icon_close2.png" mode="" @tap="goodsStatusBoolean = false"></image>
				<view class="scrollBox">
					<view class="rows" @tap="satusWay(index,item.id)" v-for="(item,index) in statusList" :key="item.name">
						<view class="name fontSize15">{{item.name}}</view>
						<view  class="noneIcon" v-show="item.beThis == false"></view>
						<image class="thisOne" src="/pages_mine/pages/static/order/icon_bingo.png" mode="" v-show="item.beThis"></image>
						<view class="clearBoth"></view>
					</view>
					<view class="clearBoth"></view>
				</view>
				<view class="btnSure" @tap="btnStatusSure">确认</view>
			</view>
		</view>
		
		
		
	</view>
</template>
<style>
	.content .payBox{width: 100%;height: 100vh;position: fixed;top:0;left:0;z-index: 2;}
	.content .payBox .bg_grey{width: 100%;height: 30vh;position: fixed;top:0;left:0;z-index: 2;background: rgba(0,0,0,0.4);}
	.content .payBox .bg_white{width: 100%;height: 70vh;position: fixed;bottom:0;left:0;z-index: 2;background: white;}
	.content .payBox .bg_white .title{width: 100%;text-align: center;color:#262626;font-weight: bold;padding:30upx 0;border-bottom: 2upx solid #DDDDDD;}
	.content .payBox .bg_white .icon{width: 28upx;height: 28upx;position: absolute;top:2%;right:2%;z-index: 2;}
	.content .payBox .bg_white .scrollBox{width: 100%;height:70%;overflow-y: scroll;}
	.content .payBox .bg_white .rows{width: 100%;margin:40upx 0;margin-bottom: 0;}
	.content .payBox .bg_white .rows .useIcon{width: 54upx;height: 54upx;float: left;margin-left: 5%;}
	.content .payBox .bg_white .rows .name{float: left;height: 54upx;line-height:54upx;margin:0 20upx;font-weight: bold;}
	.content .payBox .bg_white .rows .names{float: left;height: 54upx;line-height:54upx;margin:0;color:#BBBBBB}
	.content .payBox .bg_white .rows .noneIcon{width: 32upx;height: 32upx;border:2upx solid grey;border-radius: 100upx;float: right;margin:20upx 5% 0 0}
	.content .payBox .bg_white .rows .thisOne{ width: 32upx;height: 32upx;float: right;margin:20upx 5% 0 0}/* border:2upx solid rgb(220,88,42); */
	.content .payBox .bg_white .btnSure{width: 90%;padding: 15upx 0;margin-left: 5%;color:white;background: rgb(220,88,42);border-radius: 200upx;text-align: center;font-size: 36upx;position: absolute;left:0;bottom: 5%;z-index: 2;}
	
	.content{background: rgb(245,245,249);min-height:100vh;padding-top: 2upx;padding-bottom: 20upx;}
	.content .bgIsWhite{background: white;border-radius: 10upx;padding:5%;}
	.content .dataBox{width: 90%;margin-left: 5%;margin-top: 40upx;}
	.content .dataBox .goodsImage{width:180upx;height: 180upx;border-radius: 10upx;float: left;margin-right: 5%;}
	.content .dataBox .goodsRight{width: 65%;height:180upx;float: left;}
	.content .dataBox .goodsRight .goodsName{}
	.content .dataBox .goodsRight .ruleBox{color:#999999;float: left;margin:20upx 0 40upx 0}
	.content .dataBox .goodsRight .priceBox{width: 100%;height:70upx;line-height: 70upx;}
	.content .dataBox .goodsRight .priceBox .price{color:#262626;font-size: 40upx;float: left;}
	.content .dataBox .goodsRight .priceBox .buyNumber{color:#000000;font-weight: bold;float: right;}
	.content .chooseBox{width: 90%;margin-left: 5%;margin-top: 40upx;}
	.content .chooseBox .title{color:#010101;font-weight: bold;}
	.content .chooseBox .radioBox{float: left;width: 50%;margin:20upx 0 40upx 0;}
	.content .chooseBox .radioBox .thisOne{width: 30upx;height:30upx;border-radius: 30upx;float:left;margin-right:20upx}
	.content .chooseBox .radioBox .thisNone{width: 30upx;height:30upx;border-radius: 30upx;border:2upx solid #ccc;float:left;margin-right:20upx}
	.content .chooseBox .radioBox .name{float: left;height:30upx;line-height:30upx;font-size: 26upx;}
	.content .chooseBox .rowList{width: 100%;min-height:40upx;line-height: 40upx;display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom:30upx;}
	.content .chooseBox .rowList .backInput{width: 40%;text-align: center;border:2upx solid #DDDDDD;border-radius: 10upx;}
	.content .chooseBox .rowList .backTextarea{width: 100%;height:120upx;margin-top: 20upx;}
	.content .chooseBox .rowList .hideName{width: 65%;text-align: right;}
	.content .chooseBox .imageBoxes{margin-right:20upx;}
	.content .chooseBox .boxImage{width: 150upx;height: 150upx;border:2upx dashed #CCCCCC;display: flex;justify-content: center;flex-wrap: wrap;align-items: center;border-radius: 10upx;}
	.content .chooseBox .boxImage .icon{width: 56upx;height: 56upx;}
	.content .chooseBox .boxImage .iconName{color:#CCCCCC;font-size: 20upx;}
	.content .chooseBox .imageName{color:#BBBBBB;margin-top: 20upx;}
	.content .btnTips{width: 90%;margin-left: 5%;padding:25upx 0;color:white;border-radius: 100upx;background: #DC582A;text-align: center;margin-top:40upx}
	.content .uni-textarea-placeholder{font-size: 26upx;}
	.content .showImageBox{display:flex;justify-content:space-between;flex-wrap: wrap;}
	.content .moreImage{width: 150upx;height: 150upx;margin:20upx 20upx 0 0;border-radius: 10upx;float: left;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				data:{
					storeName:"",
					cover:"",
					name:"",
					price:"",
					number:"",
					choseeWay:0,
					backMoney:"",
					backWhy:"",
					tui_price:"",
				},
				goodsList:"",
				imageList:[],
				backWaysList:[],
				backWayBoolean:false,
				showBackWhy:false,
				BackWhyName:"",
				
				goodsStatusBoolean:false,
				statusList:[
					{id:1,name:"已收到货",beThis:false},
					{id:1,name:"未收到货",beThis:false},
				],
				showStatus:false,
				statusName:"",
				imageToken:"",
				imageSrc:"",
				thcateres:[],
				imageLists:[],
				reasonId:"",
				id:"",
				order_num:"",
				th_cate:"",
				
			}
		},
		onLoad(e){
			this.id = e.id
			this.order_num = e.order_num
			this.AjaxLoad(e.id,e.order_num)
			this.AjaxGetToken();
		},
		methods: {
			AjaxGetToken(){
				let param={
					token:this._$userToken("userInfo").token
				};
				this._$InitRequest.request('index/get_token', param).then(res => {
					this.imageToken = res.data.token
					this.imageSrc = res.data.domain + "/"
				},error=>{})
			},
			AjaxLoad(id,num){
				var backWaysList = []
				let param={
					token:this._$userToken("userInfo").token,
					order_num:num,
					orgoods_id:id,
				};
				this._$InitRequest.request("th_apply/th_info", param).then(res => {
					this.goodsList = res.data.orgoods
					this.data.tui_price = res.data.orgoods.tui_price
					this.thcateres = res.data.thcateres
					this.th_cate = res.data.thcateres[0].id
					res.data.thcateres[0].reason.forEach( (item) =>{
						backWaysList.push({
							id:item.id,
							name:item.mess,
							beThis:false,
						})
					})
					for (var i = 0; i < backWaysList.length; i++){this.backWaysList.push( backWaysList[i] )}
				},error=>{})
			},
			btnChoseeWay(e){
				var backWaysList = []
				this.data.choseeWay = e
				this.backWaysList = []
				this.BackWhyName = ""
				this.reasonId = ""
				this.th_cate = this.thcateres[e].id
				this.thcateres[e].reason.forEach( (item) =>{
					backWaysList.push({
						id:item.id,
						name:item.mess,
						beThis:false,
					})
				})
				for (var i = 0; i < backWaysList.length; i++){this.backWaysList.push( backWaysList[i] )}
			},
			btnTips(){
				var imageList = []
				this.imageLists.forEach((item)=>{
					imageList.push( item.split( this.imageSrc )[1] )
				})
				imageList = imageList.toString()

				if( Number(this.data.backMoney) > Number(this.data.tui_price) ){
					uni.showToast({title:"请输入正确的金额！",icon:"none"})
					return;
				}else if( this.reasonId == "" ){
					uni.showToast({title:"请选择退款原因!",icon:"none"})
					return;
				}else{
					let param={
						token:this._$userToken("userInfo").token,
						order_num:this.order_num,
						orgoods_id:this.id,
						th_cate:this.th_cate,
						reason_id:this.reasonId,
						th_content:this.data.backWhy,
						price:this.data.backMoney,
						image:imageList,
					};
					this._$InitRequest.request("th_apply/addthorder", param).then(res => {
						uni.showToast({title:res.mess,icon:"none"})
						if( res.status == 200 ){
							setTimeout(function(){
								uni.switchTab({
									url:"/pages/tabbar/mine"
								})
							},1500)
						}
					},error=>{})
				}
			},
			addBtn(){
				var that = this;
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: function (res) {
						uni.showLoading({
							title:"上传中"
						})
						uni.uploadFile({
							url:"https://upload.qiniup.com",
							// header:{"content-type":"multipart/form-data"},
							filePath:res.tempFilePaths[0],
							name: 'file',
							formData: {
								'token':that.imageToken
							},
							success: (res) => {
								var imageUrl = that.imageSrc + JSON.parse( res.data ).key
								var src = {'src':imageUrl}
								if( that.imageList.length > 2 ){
									uni.showToast({icon:'none',title:'抱歉，最多只能上传三张图片'})
									return;
								}else{
									that.imageList.push(src)
									that.imageLists.push(imageUrl)
								}
								uni.hideLoading()
							},
							fail:(res)=>{
							}
						});
						
				    }
				});
			},
			backWay(index,id){
				for (var i = 0; i < this.backWaysList.length; i++) {
					this.backWaysList[i].beThis = false
				}
				this.backWaysList[index].beThis = true
			},
			satusWay(index,id){
				for (var i = 0; i < this.statusList.length; i++) {
					this.statusList[i].beThis = false
				}
				this.statusList[index].beThis = true
			},
			btnBackSure(){
				this.showBackWhy = true
				for (var i = 0; i < this.backWaysList.length; i++) {
					if( this.backWaysList[i].beThis == true){
						this.BackWhyName = this.backWaysList[i].name
						this.reasonId = this.backWaysList[i].id
					}
				}
				this.backWayBoolean = false
			},
			btnStatusSure(){
				this.showStatus = true
				for (var i = 0; i < this.statusList.length; i++) {
					if( this.statusList[i].beThis == true)this.statusName = this.statusList[i].name
				}
				this.goodsStatusBoolean = false
			},
			
			
			
			
			
			
			
			
			
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>